import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link, } from "react-router-dom";
import { Layout, Progress, Card, List, Row, Col, Badge, Skeleton, Tag, Collapse, Modal, } from "antd";
import { InspectConditionDataForInpsectpush, getInspectPlanByClassIdAndCycleApi } from "../js/inspectpushapi.js";
import { inspectPlanByClassIdApi, inspectDealDetailByInspectPlanIdApi, } from "../js/api.js";
import { UrlPrefix, iconFontUrl } from "../js/config.js";
import { getSignature } from "../js/dangerpushapi.js";
import moment from 'moment';

const { Content, Sider } = Layout;

// const WX = require("jweixin-wechat");

class Inspectpush extends Component {

    constructor(props) {
        super(props);
        this.state = {
        };

    }

    componentDidMount() {
        // getSignature(window.location.href)
        //     .then(res => {
        //         WX.config({
        //             debug: false, //开启debug模式，在验证签名过程中会返回对应信息
        //             appId: res.data.appid,
        //             signature: res.data.signature,
        //             nonceStr: res.data.noncestr,
        //             timestamp: res.data.timestamp,
        //             jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']// 必填，需要使用的JS接口列表
        //         });
        //     })
        //     .catch((e) => {
        //         if (e.response) {
        //             //请求已发出，服务器返回状态码不是2xx。
        //             console.info(e.response.data)
        //             console.info(e.response.status)
        //             console.info(e.response.headers)
        //         } else if (e.request) {
        //             // 请求已发出，但没有收到响应
        //             // e.request 在浏览器里是一个XMLHttpRequest实例，
        //             // 在node中是一个http.ClientRequest实例
        //             console.info(e.request)
        //         } else {
        //             //发送请求时异常，捕捉到错误
        //             console.info('error', e.message)
        //         }
        //         console.info(e.config)
        //     });

        let urlData = this.getUrlParam("state");
        // let urlData = "13,2021-11-08,ri"

        // WX.ready(function () {
        //     var obj = {
        //         title: '巡检情况', // 分享标题
        //         desc: '点击查看巡检情况详情！', // 分享描述
        //         link: 'https://tidukeji.cn/inspectpush/index.html?state=' + urlData, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        //         // 该链接是重定向链接，因为需要获取用户code，但是该链接又无法直接写微信获取code的链接，
        //         // 所以需要点击后重新加载新的页面，来实现重定向，重新打开获取code的微信链接，实现获取用户信息的功能；
        //         imgUrl: 'https://tidukeji.cn/img/loginIcon.png', // 分享图标
        //         fail: function (res) {
        //             console.log(JSON.stringify(res));
        //         }
        //     };
        //     // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
        //     WX.onMenuShareAppMessage(obj);

        //     // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        //     WX.onMenuShareTimeline(obj);
        // })
    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {
        return (
            <Router>
                <Layout style={{ backgroundColor: '#f5f5f5' }}>
                    <Content>
                        <Switch>
                            <Route path="/classinspect" component={SchoolInspectpushClass} onLeave={this.getScrollTop} />
                            <Route path="/detail" component={SchoolInspectpushDetail} onLeave={this.setScrollTop} />
                            <Route path="/" component={SchoolInspectpushMain} />
                        </Switch>
                    </Content>
                </Layout>
            </Router>
        );
    }
}

class SchoolInspectpushMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            classData: [],
            schoolId: undefined,
            cycle: undefined,
            date: undefined,
            confirmLoading: false,
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() { //date与schoolId
        this.setState({
            confirmLoading: true,
        });

        let urlData = this.getUrlParam("state").split(",");
        // let urlData = "13,2021-11-08,ri".split(",");
        let schoolId = urlData[0];
        let date = urlData[1];
        let cycle = urlData[2];

        this.setState({
            schoolId: schoolId,
            date: date,
            cycle: cycle,
        });

        InspectConditionDataForInpsectpush(schoolId, date, cycle)
            .then((res) => {
                //得到上半个页面的数据
                let classData = [];
                res.data.data.forEach((item, index) => {
                    classData.push({
                        key: index + 1,
                        teamId: parseInt(item.classId),
                        teamName: item.className,
                        teamMates: item.classMates,
                        should: parseInt(item.should), //应巡计划数量
                        real: parseInt(item.real), //完成计划数量
                        abnormal: parseInt(item.abnormal), //发现异常项目数
                    });
                });
                this.setState({
                    classData: classData,
                    should: res.data.shouldAllClass, //应巡计划数量
                    real: res.data.realAllClass, //实巡计划数量
                    abnormal: res.data.abnormalAllClass, //异常项目数量
                    done: res.data.doneAllClass, //完成项目数
                    all: res.data.allAllClass, //总项目数
                    confirmLoading: false,
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {
        let cards = this.state.classData.map((d, index) => {
            let completionRate = (d.real / d.should * 100).toFixed(2);
            if (completionRate == 100) {
                completionRate = Number(completionRate).toFixed(0);
            }
            let data = [{
                title: '班组成员',
                description: (
                    <div className='wechatPushCardDescription'>{d.teamMates}</div>
                )
            }, {
                title: '应巡计划',
                description: (
                    <div className='wechatPushCardDescription'>{d.should}</div>
                )
            }, {
                title: '实际完成',
                description: (
                    <div className='wechatPushCardDescription'>{d.real}</div>
                )
            }, {
                title: '发现异常',
                description: (
                    <div className='wechatPushCardDescription'>{d.abnormal}</div>
                )
            }];

            return (
                <Link
                    style={{ textDecoration: 'none' }}
                    to={{
                        pathname: '/classinspect',
                        state: {
                            schoolId: this.state.schoolId,
                            date: this.state.date,
                            cycle: this.state.cycle,
                            teamId: d.teamId,
                            teamName: d.teamName,
                            teamMates: d.teamMates,
                            should: d.should,
                            real: d.real,
                            abnormal: d.abnormal,
                        }
                    }}>
                    <Card
                        key={index}
                        title={d.teamName}
                        extra={'详情 >'}
                        className='conditionCard'
                        bodyStyle={{
                            padding: '10px 24px',
                        }}>
                        <Layout>
                            <Content style={{ background: '#fff' }}>
                                <List
                                    itemLayout="horizontal"
                                    style={{ marginRight: 25 }}
                                    size="small"
                                    bordered={false}
                                    split={false}
                                    dataSource={data}
                                    renderItem={item => (
                                        <List.Item>
                                            <Row
                                                type="flex"
                                                justify="space-between"
                                                style={{
                                                    width: "100%"
                                                }}>
                                                <Col span={8} xs={10}>
                                                    {item.title}
                                                </Col>
                                                <Col
                                                    style={{ textAlign: "end" }}
                                                    span={16} xs={14}>
                                                    {item.description}
                                                </Col>
                                            </Row>
                                        </List.Item>
                                    )}
                                />
                            </Content>
                            <Sider width={'25%'} style={{ background: '#fff' }}>
                                <Progress
                                    className='progress-center'
                                    style={{
                                        fontSize: '12px',
                                    }}
                                    size='small'
                                    type="circle"
                                    percent={completionRate}
                                    width={85}
                                    strokeWidth={8}
                                    format={percent => `完成率${percent}%`}
                                />
                            </Sider>
                        </Layout>
                    </Card>
                </Link>
            )
        });
        let percent
        if(this.state.should != 0){
            percent = (this.state.real / this.state.should * 100).toFixed(2);
        }else{
            percent = '00.00'
        }
        console.log("percent", percent)
        if (percent == 100) {
            percent = Number(percent).toFixed(0);
        }

        return (
            <div style={{ paddingBottom: '10px' }}>
                <Skeleton loading={this.state.confirmLoading} active>
                    <div
                        className='conditionCard'
                        style={{
                            textAlign: 'center',
                            padding: '12px 24px',
                            background: '#ffffff',
                        }}>
                        <div>
                            日期时段：
                            {(() => {
                                switch (this.state.cycle) {
                                    case "ri": return (this.state.date);
                                    case "zhou": return (moment(this.state.date).subtract('days', 7).format('YYYY-MM-DD') + " ~ " + this.state.date);
                                    case "yue": return ("上个月");
                                    case "nian": return ("去年");
                                    default: return null;
                                }
                            }
                            )()}
                        </div>
                        <div>
                            <Progress
                                type="circle"
                                percent={percent}
                                width={150}
                                strokeWidth={8}
                                style={{ marginTop: '10px', fontSize: '28px' }}
                                format={percent => `完成率${percent}%`}
                            />
                        </div>

                        <div>
                            <Row style={{ marginTop: '10px', }}>
                                <Col span={12}>
                                    <Badge
                                        status="processing"
                                        text={"应巡计划：" + this.state.should + "个"} />
                                </Col>
                                <Col span={12}>
                                    <Badge
                                        status="success"
                                        text={"实际完成：" + this.state.real + "个"} />
                                </Col>
                                <Col span={24}>
                                    <Badge
                                        status="warning"
                                        text={"检查内容/检查完成/异常：" +
                                            this.state.all + "/" + this.state.done + "/" + this.state.abnormal} />
                                </Col>
                            </Row>
                        </div>
                    </div>
                    <div style={{
                        width: '100%',
                        marginTop: '10px',
                    }}>
                        {cards}
                    </div>
                </Skeleton>
            </div>
        )
    }
}


class SchoolInspectpushClass extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            schoolId: this.props.location.state.schoolId,
            date: this.props.location.state.date,
            teamId: this.props.location.state.teamId,
            teamName: this.props.location.state.teamName,
            teamMates: this.props.location.state.teamMates,
            should: this.props.location.state.should,
            real: this.props.location.state.real,
            cycle: this.props.location.state.cycle,
            abnormal: this.props.location.state.abnormal,
            confirmLoading: false,

            scrollTopAble: false,
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    componentWillUnmount() {
        this.setScrollTop();
    }

    componentDidUpdate() {
        this.getScrollTop();
    }

    refreshData() { //date与schoolId
        this.setState({
            confirmLoading: true,
        });
        getInspectPlanByClassIdAndCycleApi(this.state.schoolId, this.state.teamId, true, this.state.cycle)
            .then((res) => {
                //得到上半个页面的数据
                let data = [];
                for (let i = 0; i < res.data.length; i++) {
                    //当时间是本周
                    // if (moment(this.state.date).subtract('days', 7) - moment(res.data[i].deadline) <= 0
                    //     && moment(this.state.date) - moment(res.data[i].deadline) >= 0) {
                    //     data.push(res.data[i]);
                    // } else if (moment(this.state.date).subtract('days', 7) - moment(res.data[i].deadline) > 0) {
                    //     break;
                    // }

                    data.push(res.data[i]);
                }
                // console.log('data', data);
                this.setState({
                    data: data,
                    confirmLoading: false,
                    scrollTopAble: true,
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }

    //返回数组内出现的次数
    findNumInArr(arr, ele) {
        var temp = [];
        for (var index = 0; index < arr.length; index++) {
            if (arr[index] == ele) {
                temp.push(true);
            }
        }
        return temp.length;
    }

    setScrollTop() {
        let scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        }
        else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        sessionStorage.setItem('scrollTop', scrollTop);
    }

    getScrollTop() {
        if (!isNaN(sessionStorage.getItem('scrollTop'))) {
            window.scrollTo(0, sessionStorage.getItem('scrollTop'));
        }
    }

    render() {
        let BottomCards = this.state.data.map((d, index) => {

            let itemList = (
                <List
                    size="small"
                    bordered={false}
                    split={false}
                    dataSource={d.inspectplanIds}
                    renderItem={(item, i) => {
                        let bgcolor = '';
                        if (d.statusInt[i] == 1) {
                            bgcolor = 'rgba(235, 232, 232, 0.411)';
                        } else if (d.statusInt[i] == 2) {
                            bgcolor = '#f7eee7';
                        }

                        let iconSrc;
                        if (d.singlePlanNormal[i] == 1) {
                            iconSrc = 'pass';
                        } else if (d.singlePlanNormal[i] == 2) {
                            iconSrc = 'dealicon';
                        } else if (d.singlePlanNormal[i] == 3) {
                            iconSrc = 'alert';
                        }

                        let listItem = (
                            <List.Item
                                className='itemList'
                                style={{
                                    backgroundColor: bgcolor,
                                    marginTop: 5,
                                }}
                            >
                                <div
                                    style={{
                                        width: '100%',
                                        height: '100%',
                                    }}>
                                    <div
                                        style={{
                                            display: 'inline-block',
                                            verticalAlign: 'middle',
                                        }}>
                                        <img
                                            style={{
                                                width: '50px',
                                                height: '50px',
                                                marginLeft: 20
                                            }}
                                            src={require("../img/pl.png")}></img>
                                    </div>
                                    <div
                                        style={{
                                            color: '#666',
                                            fontSize: 16,
                                            display: 'inline-block',
                                            marginLeft: 20,
                                            verticalAlign: 'middle',
                                        }}>
                                        {d.items[i]}
                                    </div>
                                    <div
                                        style={{
                                            display: 'inline-block',
                                            verticalAlign: 'middle',
                                            float: 'right',
                                            marginRight: 20,
                                            marginTop: 10,
                                        }}>
                                        {d.singlePlanNormal[i] == 0 ? null : (
                                            <img
                                                style={{
                                                    width: 30,
                                                    height: 30,
                                                }}
                                                src={require('../img/' + iconSrc + '.png')} />
                                        )}
                                    </div>
                                </div>
                            </List.Item>
                        );

                        return (
                            <div>
                                {d.statusInt[i] == 1 ?
                                    (
                                        <Link
                                            style={{ textDecoration: 'none' }}
                                            to={{
                                                pathname: '/detail',
                                                state: {
                                                    schoolId: this.state.schoolId,
                                                    inspectPlanId: item
                                                }
                                            }}>
                                            {listItem}
                                        </Link>
                                    ) :
                                    (
                                        <div>{listItem}</div>
                                    )}
                            </div>

                        )
                    }}
                />
            );

            let cardData = [{
                title: '截止日期',
                description: (
                    <div className='wechatPushCardDescription'>{d.deadline}</div>
                )
            }, {
                title: '地点',
                description: (
                    <div className='wechatPushCardDescription'>{d.address}</div>
                )
            }, {
                title: '巡检类别',
                description: (
                    <div className='wechatPushCardDescription'>{d.category}</div>
                )
            }, {
                title: '排查项目',
                description: (
                    <div className='wechatPushCardDescription'>{d.abnormal}</div>
                )
            }];

            return (
                <Card
                    key={index}
                    title={d.address}
                    className='conditionCard'
                    bodyStyle={{
                        padding: '10px 24px',
                    }}>
                    <Layout>
                        <Content style={{ background: '#fff' }}>
                            <List
                                itemLayout="horizontal"
                                size="small"
                                bordered={false}
                                split={false}
                                dataSource={cardData.slice(0, 3)}
                                renderItem={item => (
                                    <List.Item>
                                        <Row
                                            type="flex"
                                            justify="space-between"
                                            style={{
                                                width: "100%"
                                            }}>
                                            <Col span={4} xs={10}>
                                                {item.title}
                                            </Col>
                                            <Col
                                                style={{ textAlign: "end" }}
                                                span={20} xs={14}>
                                                {item.description}
                                            </Col>
                                        </Row>
                                    </List.Item>
                                )}
                            />
                        </Content>
                    </Layout>
                    <List
                        itemLayout="vertical"
                        size="small"
                        bordered={false}
                        split={false}
                        dataSource={cardData.slice(3, cardData.length)}
                        renderItem={item => (
                            <List.Item>
                                <List.Item.Meta
                                    title={item.title}
                                />
                                <div
                                    style={{
                                        textAlign: 'center',
                                        marginBottom: 20,
                                        marginTop: -10,
                                    }}>
                                    <Tag color="rgba(235, 232, 232, 0.411)"
                                        style={{
                                            color: 'rgb(32, 28, 28)',
                                            marginRight: 20,
                                            height: 24,
                                            width: 80,
                                        }}>
                                        <div
                                            style={{
                                                verticalAlign: 'middle'
                                            }}>
                                            已排查丨{this.findNumInArr(d.statusInt, 1)}
                                        </div>
                                    </Tag>
                                    <Tag color="#f7eee7"
                                        style={{
                                            color: 'rgb(32, 28, 28)',
                                            marginLeft: 20,
                                            height: 24,
                                            width: 80,
                                        }}>
                                        <div
                                            style={{
                                                verticalAlign: 'middle'
                                            }}>
                                            未排查丨{this.findNumInArr(d.statusInt, 2)}
                                        </div>
                                    </Tag>
                                </div>
                                {itemList}
                            </List.Item>
                        )}
                    />
                </Card>
            )
        });


        let topData = [{
            title: '日期时段',
            description: (
                <div className='wechatPushCardDescription'>
                    {moment(this.state.date).subtract('days', 7).format('YYYY-MM-DD') + " ~ " + this.state.date}
                </div>
            )
        }, {
            title: '班组名称',
            description: (<div className='wechatPushCardDescription'>{this.state.teamName}</div>)
        }, {
            title: '班组成员',
            description: (<div className='wechatPushCardDescription'>{this.state.teamMates}</div>)
        }, {
            title: '应巡计划',
            description: (<div className='wechatPushCardDescription'>{this.state.should}</div>)
        }, {
            title: '实际完成',
            description: (<div className='wechatPushCardDescription'>{this.state.real}</div>)
        }, {
            title: '发现异常',
            description: (<div className='wechatPushCardDescription'>{this.state.abnormal}</div>)
        }];

        let completionRate = (this.state.real / this.state.should * 100).toFixed(2);
        if (completionRate == 100) {
            completionRate = Number(completionRate).toFixed(0);
        }

        return (
            <div style={{ paddingBottom: '10px' }}>
                <Skeleton loading={this.state.confirmLoading} active>
                    <div
                        className='conditionCard'
                        style={{
                            padding: '12px 24px',
                            background: '#ffffff',
                        }}>
                        <List
                            itemLayout="horizontal"
                            size="small"
                            bordered={false}
                            split={false}
                            dataSource={topData.slice(0, 3)}
                            renderItem={item => (
                                <List.Item>
                                    <Row
                                        type="flex"
                                        justify="space-between"
                                        style={{
                                            width: "100%"
                                        }}>
                                        <Col span={5} xs={10}>
                                            {item.title}
                                        </Col>
                                        <Col
                                            style={{ textAlign: "end" }}
                                            span={19} xs={14}>
                                            {item.description}
                                        </Col>
                                    </Row>
                                </List.Item>
                            )}
                        />
                        <Layout>
                            <Content style={{ background: '#fff' }}>
                                <List
                                    itemLayout="horizontal"
                                    style={{ marginRight: 25 }}
                                    size="small"
                                    bordered={false}
                                    split={false}
                                    dataSource={topData.slice(3, topData.length)}
                                    renderItem={item => (
                                        <List.Item>
                                            <Row
                                                type="flex"
                                                justify="space-between"
                                                style={{
                                                    width: "100%"
                                                }}>
                                                <Col span={8} xs={10}>
                                                    {item.title}
                                                </Col>
                                                <Col
                                                    style={{ textAlign: "end" }}
                                                    span={16} xs={14}>
                                                    {item.description}
                                                </Col>
                                            </Row>
                                        </List.Item>
                                    )}
                                />
                            </Content>
                            <Sider width={'25%'} style={{ background: '#fff' }}>
                                <Progress
                                    className='progress-center'
                                    style={{
                                        fontSize: '12px',
                                    }}
                                    size='small'
                                    type="circle"
                                    percent={completionRate}
                                    width={85}
                                    strokeWidth={8}
                                    format={percent => `完成率${percent}%`}
                                />
                            </Sider>
                        </Layout>
                    </div>
                    <div
                        style={{
                            width: '100%',
                            marginTop: '10px',
                        }}>
                        {BottomCards}
                    </div>
                </Skeleton>
            </div>
        )
    }
}

class SchoolInspectpushDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            schoolId: this.props.location.state.schoolId,
            inspectPlanId: this.props.location.state.inspectPlanId,

            activeKey: [], //控制list是否可展开

            confirmLoading: false,
        };
    }

    componentDidMount() {
        this.refreshData();

        // getSignature(window.location.href)
        //     .then(res => {
        //         WX.config({
        //             debug: false, //开启debug模式，在验证签名过程中会返回对应信息
        //             appId: res.data.appid,
        //             signature: res.data.signature,
        //             nonceStr: res.data.noncestr,
        //             timestamp: res.data.timestamp,
        //             jsApiList: ['previewImage']
        //         });
        //     })
        //     .catch((e) => {
        //         if (e.response) {
        //             //请求已发出，服务器返回状态码不是2xx。
        //             console.info(e.response.data)
        //             console.info(e.response.status)
        //             console.info(e.response.headers)
        //         } else if (e.request) {
        //             // 请求已发出，但没有收到响应
        //             // e.request 在浏览器里是一个XMLHttpRequest实例，
        //             // 在node中是一个http.ClientRequest实例
        //             console.info(e.request)
        //         } else {
        //             //发送请求时异常，捕捉到错误
        //             console.info('error', e.message)
        //         }
        //         console.info(e.config)
        //     });

    }

    refreshData() { //date与schoolId
        this.setState({
            confirmLoading: true,
        });
        inspectDealDetailByInspectPlanIdApi(this.state.inspectPlanId)
            .then((res) => {
                //console.log(res);
                let activeKey = [];
                for (let i = 0; i < res.data.Info.length; i++) {
                    if (res.data.Info[i].statusString == '不通过') {
                        //this.state.activeKey.push(i + '');
                        // let activeKeyTemp = this.state.activeKey;
                        activeKey.push(i + '');
                    }
                }
                this.setState({
                    activeKey: activeKey,
                    data: res.data.Info,
                    confirmLoading: false,
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }


    imgOnClickHandle = (photoArray, current) => {
        // WX.ready(() => {
        //     WX.previewImage({
        //         current: UrlPrefix + photoArray[current],
        //         urls: photoArray.map(val => UrlPrefix + val) //需要预览的图片http链接列表
        //     });
        // });
    }

    render() {
        const Panel = Collapse.Panel;
        const gridStyle = {
            width: '33.3333vw',
            height: '33.3333vw',
            textAlign: 'center',
            position: 'relative'
        };

        const panels = this.state.data.map((d, index) => {
            let status;
            if (d.statusString == '通过') {
                status = 3;
            } else if (d.statusString == '不通过') {
                status = 4;
            } else if (d.statusString == '已处理') {
                status = 5;
            }
            let header = (
                <div style={{ height: '100%', width: '100%' }}>
                    <div style={{ width: '80%', left: 0, }}>
                        {d.content}
                    </div>
                    <img
                        style={{
                            width: '15%',
                            right: 5,
                            top: 0,
                            bottom: 0,
                            margin: 'auto',
                            position: 'absolute',
                        }}
                        src={require('../img/status' + status + '.png')}
                    />
                </div>
            );

            let photos;
            if (d.photo == '') {
                photos = (
                    <Card.Grid
                        key={0}
                        style={gridStyle}>
                        <img
                            style={{
                                width: 'auto',
                                height: 'auto',
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                right: 0,
                                bottom: 0,
                                margin: 'auto',
                                maxWidth: '100%',
                                maxHeight: '100%',
                                padding: 5,
                            }}
                            alt="暂无图片"
                            src={require('../img/nophoto.png')} />
                    </Card.Grid>
                );
            } else {
                photos = d.photoArray.map((d2, index2) =>
                    <Card.Grid
                        key={index2}
                        style={gridStyle}>
                        <img
                            style={{
                                width: 'auto',
                                height: 'auto',
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                right: 0,
                                bottom: 0,
                                margin: 'auto',
                                maxWidth: '100%',
                                maxHeight: '100%',
                                padding: 5,
                            }}
                            src={UrlPrefix + d2}
                            onClick={() => this.imgOnClickHandle(d.photoArray, index2)} />
                    </Card.Grid>
                );
            }

            let recordContent;
            if (d.recordContent == null) {
                recordContent = '无';
            } else {
                recordContent = d.recordContent;
            }

            let listTiele = ['', ''];
            if (status == 4) {
                listTiele[0] = '巡检记录';
                listTiele[1] = '巡检现场照片';
            } else if (status == 5) {
                listTiele[0] = '异常处理记录';
                listTiele[1] = '异常处理照片';
            }
            let listData = [{
                title: listTiele[0],
                description: recordContent,
            }, {
                title: listTiele[1],
                description: (
                    <Card
                        hoverable
                        style={{ marginTop: '10px' }}>
                        {photos}
                    </Card>
                ),
            }];

            if (d.updateUserName != null) {
                listData.unshift({
                    title: '注',
                    description: (
                        <span>
                            本巡检项由
                            <span style={{ color: 'red' }}>
                                {' ' + d.updateUserName + ' '}
                            </span>
                            于
                            <span style={{ color: 'red' }}>
                                {' ' + d.modifyTime + ' '}
                            </span>
                            更新巡检结果信息
                        </span>
                    ),
                });
            }
            return (
                <Panel
                    header={header}
                    key={index + ''}
                    disabled={(status == 3) ? true : false}
                    style={{
                        margin: '10px 8px',
                        backgroundColor: '#ffffff',
                        borderRadius: 6,
                    }} >
                    <List
                        itemLayout="horizontal"
                        dataSource={listData}
                        renderItem={item => (
                            <List.Item>
                                <Row
                                    type="flex"
                                    justify="space-between"
                                    style={{
                                        width: "100%"
                                    }}>
                                    <Col span={8} xs={10}>
                                        {item.title}
                                    </Col>
                                    <Col
                                        style={{ textAlign: "end" }}
                                        span={16} xs={14}>
                                        {item.description}
                                    </Col>
                                </Row>
                            </List.Item>
                        )}
                    />
                </Panel>
            );
        })
        return (
            <div>
                <Skeleton
                    loading={this.state.confirmLoading} active>
                    <Collapse
                        style={{
                            backgroundColor: '#f5f5f5',
                            border: 'none',
                        }}
                        defaultActiveKey={this.state.activeKey}
                        onChange={key => this.setState({ activeKey: key })} >
                        {panels}
                    </Collapse>
                </Skeleton>
            </div>
        )
    }
}







export default Inspectpush;